
<template>
  <div class="my-table" v-if="col.length">
    <el-table max-height="700" border ref="table11"
    row-key="id"
    :data="data" style="width: 100%; border:1px solid #000; border-color: #000" :cell-style="tableCellStyle" :header-cell-style="tableHeaderCellStyle" :row-class-name="tableRowClassName" @cell-click="handle"
    @row-click="getOpenDetail"
    @expand-change="expandChange">
  <el-table-column
            prop="parentName"
            width="1"
            header-align="center"
            align="center"
            label="">
          </el-table-column>
      <my-column v-for="items in col" :key="items.id" :col="items"></my-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    col: {
      type: Array,
    },
    data: {
      type: Array,
    },
  },
  methods: {
      getOpenDetail(row, column, event){
        // console.log(row, column, event.path[2].firstChild.firstChild,'111');
        },
    expandChange(row, expandedRows){
      // console.log(row,'222222');
    },
    handle(row,column,event,cell) {
      // console.log(row,column,event);
      if (column.label!='项目') {    
        let value = event.innerText
        // console.log(value);
        this.$emit('getcode',value)
      }
        let $table = this.$refs.table11;
       $table.toggleRowExpansion(row)
      
    },
    // 修改 table cell边框的背景色
    tableCellStyle() {
      return "border-color: #868686;";
    },
    // 修改 table header cell的背景色
    tableHeaderCellStyle() {
      return "border-color: #868686; color: #606266;";
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(row);
      if (row.grade === "1级") {
        return "row-1";
      }
      if (row.grade === "2级") {
        return "row-2";
      }
      if (row.grade === "3级") {
        return "row-3";
      }
      if (row.grade === "4级") {
        return "row-4";
      }
    },
  },
};
</script>
<style lang="less">
.my-table {
.el-table__body-wrapper {
  cursor: pointer;
}
// .cell {
//   padding: 0!important;
//   margin-left: 20px;
// }
}
.el-table .row-1 {
  background: #ffffff !important;
}

.el-table .row-2 {
  background: #00b050 !important;
}
.el-table .row-3 {
  background: #e5f0dd;
}
.el-table .row-4 {
  background: #fff2cc;
}
</style>